﻿<script src="/static/js/jquery-2.1.1.js"></script>
<script src="/static/bootstrap/js/bootstrap.js"></script>
<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<link href="/static/layui/css/layui.css" rel="stylesheet"/>
<script src="/static/layui/layui.js"></script>

<style>
    .layui-inline{margin-bottom:15px;display: inline-block}
    .layui-input-block{margin-left:0px!important;}
    .zxd_coordinate{border:1px solid silver;line-height:30px;height:30px;display: inline-block;padding:0px 10px;border-radius:3px;margin:5px;background-color: #0b6fff;color: #fff;position: relative}
    .zxd_contetnt{line-height:30px;padding-right:10px!important;padding-left:10px!important;}
    .zxd_list{display: inline-block;width:100%;line-height:38px;}
    .zxd_list div{background-color:#f5f5f5;margin-bottom:15px;padding:5px 10px;border-radius:4px;display: inline-block;width:100%}

    .zxd_list p{display: inline-block;width:100%}
    .zxd_list span{display:inline-block;text-align: right;font-size:12px;}
    .zxd_list span:last-child{float: right}
    .zxd_history{padding-right:10px!important;padding-left:10px!important;height:300px;display: block;overflow:auto;  }
    .zxd_coordinate font{
        position: absolute;
        top:-5px;border-radius: 20px;
        right:-8px;line-height:20px;height:20px;width: 20px;text-align: center;
        background-color: #FF0000;color: #FFFFFF;
    }
</style>
<div class="modal-body">

    <!--layui-form-pane-->
    <form class="layui-form layui-form-pane form-horizontal" name="saveForm" action="" >

        <div class="layui-form-item layui-col-md12">
            <label class="layui-form-label">关联项目</label>
            <div class="input-group col-xs-9" style="float: left">
                <select name="pro_id" class="layui-select" lay-search="">
                    <option value="">请关联项目</option>
                    {volist name="prolist" id="vo"}
                    <option value="{$vo.id}">{$vo.title}</option>
                    {/volist}
                </select>
            </div>
        </div>

        <div class="layui-form-item layui-col-md12">
            <label class="layui-form-label">交办时间</label>
            <div class="input-group col-xs-9" style="float: left">
                <input name="sumbit_time" type="text" class="layui-input test-item" >
            </div>
        </div>

        <div class="layui-form-item layui-col-md12">
            <label class="layui-form-label">交办事项</label>
            <div class="input-group col-xs-9" style="float: left">
                <input type="text" name="matter" class="layui-input" >
            </div>
        </div>

        <div class="layui-form-item layui-col-md12">
            <label class="layui-form-label">联系人</label>
            <div class="input-group col-xs-9" style="float: left">
                <input type="text" name="head" class="layui-input" >
            </div>
        </div>

        <div class="layui-form-item layui-col-md12">
            <label class="layui-form-label">完成时限</label>
            <div class="input-group col-xs-9" style="float: left">
                <input type="text"  name="deadline" class="layui-input test-item" >
            </div>
        </div>

        <div class="layui-form-item layui-col-md12">
            <label class="layui-form-label">联系方式</label>
            <div class="input-group col-xs-9" style="float: left">
                <input name="phone" type="text" class="layui-input" >
            </div>
        </div>


        <div class="layui-form-item layui-col-md12">
            <label class="layui-form-label">内容</label>
            <div class="input-group col-xs-9" style="float: left">
                <textarea name="content" class="layui-textarea"></textarea>
            </div>
        </div>


        <div class="layui-form-item layui-col-md12">
            <label class="layui-form-label">协调人员</label>
            <div class="input-group col-xs-9 addPersonnelView" style="float: left">

            </div>
        </div>

        <div class="layui-form-item layui-col-md12">
            <label class="layui-form-label">操作</label>
            <div class="input-group col-xs-9" style="float: left">
                <div class="layui-btn layui-btn-normal addPersonnel" >添加协助人员</div>
            </div>
        </div>

        <input type="hidden" name="type" value="1">

    </form>

</div>
<script>

    layui.use(['form', 'laydate','upload'], function () {
        var form = layui.form;
        var laydate = layui.laydate;
        var detail = "{:URL('project/Help/addPersonnel')}";

        $(".addPersonnel").click(function () {
            var showUrl =  "{:URL('project/Help/addPersonnel')}";
            showView(showUrl,"详情");
        });

        //删除协助人员
        $('.addPersonnelView').on('click','.del', function() {
            $(this).parent().remove();
        });

        //同时绑定多个
        lay('.test-item').each(function(){
            laydate.render({
                elem: this
                ,trigger: 'click'
                ,type: 'date'
            });
        });

        function showView(showUrl,type){
            layer.open({
                type: 2,
                skin: 'layui-layer-demo', //样式类名
                area: ['450px','400px'],            //宽度450px,高自适应
                anim: 2,
                shadeClose: false, //开启遮罩关闭,
                maxmin: true,
                title: type,
                content:showUrl,
                btn:['添加','关闭'],
                yes: function (index,layero) {
                    var body = layer.getChildFrame('body', index);
                    var data = body.find("form[name='accountForm']").serializeArray();
                    $.ajax({
                        type: "post",
                        url: "/project/help/doPersonnel",
                        data: data,
                        dataType: "json",
                        success: function (res) {
                            layer.alert(res.msg);
                            if(res.code==0){
                               $(".addPersonnelView").append(res.html);
                            }
                        }
                    });
                    // data.push({name: "plan_id", value: plan_id});
                },
            });
        }

    });






</script>